<template>
  <div class="personalDataWrapper">
    <div class="personalDataCentent">
      <div class="top">
        <AvatarUploader
          :avatar="avatar"
          :region="options_OSS.region"
          :accessKeyId="options_OSS.accessKeyId"
          :accessKeySecret="options_OSS.accessKeySecret"
          :bucket="options_OSS.bucket"
          @avatarUrl="getAvatarUrl"
          @deleteAvatar="deleteAvatar"
        ></AvatarUploader>
        <div class="title">
          <div class="name">加密财富</div>
          <div class="wallet">
            <span
              style="margin-right: 10px"
            >{{ getAddress('0xd59E42897299f7856B46eD9cD77CDf9DB9cCB99e') }}</span>
            <el-button style="margin-right: 10px; color: #171821" size="mini">Follow</el-button>
            <el-button style="margin-right: 10px; color: #171821" size="mini">Share</el-button>
            <el-button style="margin-right: 10px; color: #171821" size="mini">Invitate</el-button>
          </div>
        </div>
      </div>
      <div style="display: flex">
        <div class="personData">
          <div class="title">基本信息</div>
          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">Unique id</span>
            </el-col>
            <el-col>
              <el-tag type="success" effect="dark">@CryptoCode.JO</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">User Name</span>
            </el-col>
            <el-col>
              <input class="input" placeholder="加密财富" />
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">User Email</span>
            </el-col>
            <el-col>
              <input class="input" placeholder="User Email" />
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">GitHub Link</span>
            </el-col>
            <el-col>
              <input class="input" placeholder="GitHub Link" />
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">Twitter Link</span>
            </el-col>
            <el-col>
              <input class="input" placeholder="Twitter Link" />
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">Discord Link</span>
            </el-col>
            <el-col>
              <input class="input" placeholder="Discord Link" />
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">User Profile</span>
            </el-col>
            <el-col>
              <textarea
                class="textarea"
                style="
                  border: 0;
                  border-radius: 5px;
                  background-color: rgba(241, 241, 241, 0.98);
                  width: 355px;
                  height: 100px;
                  padding: 10px;
                  resize: none;
                "
                placeholder="请输入个人简介"
              ></textarea>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <span class="name">Interest Label</span>
            </el-col>
            <el-col>
              <TagsInput style="max-width: 500px" :source.sync="source" />
            </el-col>
          </el-row>
        </div>
        <div class="thingOnChain">
          <div class="nfts">
            <div class="title">NFTs</div>
            <div class="nft">
              <div class="image"></div>
              <div class="image"></div>
              <div class="image"></div>
              <div class="image"></div>
            </div>
          </div>
          <div class="poaps">
            <div class="title">POAPs</div>
            <div class="poap">
              <div class="image"></div>
              <div class="image"></div>
              <div class="image"></div>
              <div class="image"></div>
            </div>
          </div>
          <div class="coins">
            <div class="title">COINs</div>
            <div class="coin">
              <div class="image"></div>
              <div class="image"></div>
              <div class="image"></div>
              <div class="image"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="project">
        <div class="title">PROJECTs</div>
        <WordCloud3D />
      </div>-->
    </div>
  </div>
</template>

<script lang="ts">
import { getOmittedAddress } from '@/utils/getOmittedAddress'
import { Component, Vue } from 'nuxt-property-decorator'
import AvatarUploader from '@/components/AvatarUploader.vue'
import TagsInput from '@/components/TagsInput.vue'
@Component({
  components: {
    AvatarUploader,
    TagsInput,
  },
})
export default class Profile extends Vue {
  options_OSS = {
    region: 'oss-cn-chengdu',
    accessKeyId: 'LTAI5tQPHvixV8aakp1vg8Jr',
    accessKeySecret: 'xYyToToPe8UFQMdt4hpTUS4PNxzl9S',
    bucket: 'yimiao-manage',
  }
  avatar = ''

  // 兴趣标签
  source = ['英雄联盟', '骚猪', '对对对对对我是娇妹', '小轩在不在']

  getAvatarUrl(avatarUrl: string) {
    console.log('头像url:', avatarUrl)
  }
  deleteAvatar() {}

  // 获取简略钱包名字
  getAddress(val: string) {
    return getOmittedAddress(val)
  }
}
</script>

<style lang="scss" scoped>
.personalDataWrapper {
  padding: 24px 40px;
  height: 100%;
  .personalDataCentent {
    margin: 0 auto;
  }
  .top {
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 4%);
    height: 100px;
    display: flex;
    align-items: center;
    .title {
      margin-left: 16px;
      .name {
        margin-bottom: 20px;
        color: #ffff;
        font-size: 24px;
      }
      .wallet {
        color: #ffff;
        font-size: 24px;
      }
    }
  }
  .personData {
    flex: 1;
    .title {
      padding: 20px 0;
      font-size: 24px;
      color: #ffff;
    }
    .name {
      color: #ffff;
      font-size: 16px;
    }
    input.input,
    textarea.textarea {
      width: 355px;
      &:focus {
        border: 1px solid #fafafa;
        -outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
          0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
          0 0 8px rgba(102, 175, 233, 0.6);
      }
      color: #333;
      line-height: normal;
      font-family: 'Microsoft YaHei', Tahoma, Verdana, SimSun;
      font-style: normal;
      font-variant: normal;
      font-size-adjust: none;
      font-stretch: normal;
      font-weight: normal;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 4px;
      padding-right: 4px;
      padding-bottom: 4px;
      padding-left: 4px;
      font-size: 15px;
      outline-width: medium;
      outline-style: none;
      outline-color: invert;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      text-shadow: 0px 1px 2px #fff;
      background-attachment: scroll;
      background-repeat: repeat-x;
      background-position-x: left;
      background-position-y: top;
      background-size: auto;
      background-origin: padding-box;
      background-clip: border-box;
      background-color: rgb(255, 255, 255);
      margin-right: 8px;
      border-top-color: #ccc;
      border-right-color: #ccc;
      border-bottom-color: #ccc;
      border-left-color: #ccc;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
    }
    .el-row {
      padding: 10px 0;
      display: flex;
      align-items: center;
    }
    .interestLabel {
      .title {
        padding: 20px 0;
        font-size: 24px;
        color: #ffff;
        .name {
          color: #ffff;
          font-size: 16px;
        }
      }
    }
  }

  .thingOnChain {
    flex: 1;
    .nfts {
      .title {
        padding: 20px 0;
        font-size: 24px;
        color: #ffff;
      }
      .nft {
        display: flex;
        .image {
          border-radius: 6px;
          border: 1px dashed #ffffff;
          height: 62px;
          width: 62px;
          margin-right: 5px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
    .poaps {
      .title {
        padding: 20px 0;
        font-size: 24px;
        color: #ffff;
      }
      .poap {
        display: flex;
        .image {
          border-radius: 6px;
          border: 1px dashed #ffffff;
          height: 62px;
          width: 62px;
          margin-right: 5px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
    .coins {
      .title {
        padding: 20px 0;
        font-size: 24px;
        color: #ffff;
      }
      .coin {
        display: flex;
        .image {
          border-radius: 6px;
          border: 1px dashed #ffffff;
          height: 62px;
          width: 62px;
          margin-right: 5px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
    .project {
      height: 400px;
      .title {
        padding: 20px 0;
        font-size: 24px;
        color: #ffff;
      }
    }
  }
}
</style>
